<template>
  <div id="flight-change-order-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/flt/change/orders">改签单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="order-tab"
            data-bs-toggle="tab"
            href="#orderDetailTab"
            role="tab"
            aria-controls="home"
            aria-selected="true"
            >改签单信息</a
          >
        </li>
        <li
          class="nav-item"
          v-if="detail !== null && detail.smsDetails.length > 0"
        >
          <a
            class="nav-link"
            id="sms-tab"
            data-bs-toggle="tab"
            href="#smsDetailTab"
            role="tab"
            aria-controls="sms"
            aria-selected="false"
            >短信({{ detail.smsDetails.length }})</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div
          class="tab-pane fade show active"
          id="orderDetailTab"
          role="tabpanel"
          aria-labelledby="order-tab"
        >
          <dl class="row">
            <dt class="col-4 text-end">乘机人</dt>
            <dd class="col-8">{{ detail.psgName }}</dd>
            <dt class="col-4 text-end">证件号</dt>
            <dd class="col-8">{{ detail.idNo }}</dd>
            <dt class="col-4 text-end">改签单号</dt>
            <dd class="col-8">{{ detail.changeOrderNo }}</dd>
            <dt class="col-4 text-end">票号</dt>
            <dd class="col-8">
              {{ detail.balanceCode }}-{{ detail.ticketNo }}
            </dd>
            <dt class="col-4 text-end">原编码</dt>
            <dd class="col-8">{{ detail.oldPnrNo }}</dd>
            <dt class="col-4 text-end">公司名称</dt>
            <dd class="col-8">
              {{ showCustomerName(detail) }}
              <template v-if="detail.customerType === 0">散客</template>
              <template v-if="detail.customer !== null">{{
                detail.customer.vipName
              }}</template>
            </dd>
            <dt class="col-4 text-end">关联单</dt>
            <dd class="col-8">
              <!-- <span class="small" v-if="detail.parentChangeOrderNo !== null && detail.parentChangeOrderNo.length > 0">
                    ({{detail.parentChangeOrderNo}})
                  </span> -->
              <router-link :to="`/h5/flt/order/0?orderNo=` + detail.orderNo">
                {{ detail.orderNo }}</router-link
              >
            </dd>
          </dl>
          <div class="card-body bg-info text-white py-0">航班信息</div>
          <table class="table table-striped table-hover table-sm">
            <thead>
              <tr>
                <th>出发</th>
                <th>到达</th>
                <th>航班</th>
                <th>日期</th>
                <th>舱位</th>
                <th>起飞</th>
                <th>降落</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="info in detail.flights"
                :key="info.id"
                v-bind:class="{ small: info.fltType === 0 }"
              >
                <td>
                  {{ info.dport }}
                  <span class="d-none d-md-inline"
                    >{{ info.dportName }} {{ info.dterm }}</span
                  >
                </td>
                <td>
                  {{ info.aport }}
                  <span class="d-none d-md-inline"
                    >{{ info.aportName }} {{ info.aterm }}</span
                  >
                </td>
                <td>{{ info.flightNo }}</td>
                <td>{{ info.ddate }}</td>
                <td>{{ info.subclass }}</td>
                <td>{{ info.dtime }}</td>
                <td>{{ info.atime }}</td>
              </tr>
            </tbody>
          </table>
          <template v-if="detail.detrFlights.length > 0">
            <div class="card-body bg-info text-white py-0">DETR信息</div>
            <table class="table table-hover table-sm">
              <thead class="table-light">
                <tr>
                  <th>出发</th>
                  <th>到达</th>
                  <th>航班号</th>
                  <th>舱位</th>
                  <th>出发时间</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(info, index) in detail.detrFlights" :key="index">
                  <td>
                    {{ info.dport }}
                    <span class="d-none d-md-inline"
                      >{{ info.dportName }} {{ info.dterm }}</span
                    >
                  </td>
                  <td>
                    {{ info.aport }}
                    <span class="d-none d-md-inline"
                      >{{ info.aportName }} {{ info.aterm }}</span
                    >
                  </td>
                  <td>{{ info.flightNo }}</td>
                  <td>{{ info.subclass }}</td>
                  <td>{{ info.ddate.substring(5) }} {{ info.dtime }}</td>
                  <td>
                    {{ info.ticketStatus }}
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
          <dl class="row">
            <dt class="col-4 text-end">销售价</dt>
            <dd class="col-8">{{ detail.parvalue }}</dd>
            <dt class="col-4 text-end">税</dt>
            <dd class="col-8">{{ detail.tax }}</dd>
            <dt class="col-4 text-end">航司改签费</dt>
            <dd class="col-8">{{ detail.airChangeCharge }}</dd>
            <dt class="col-4 text-end">我司服务费</dt>
            <dd class="col-8">{{ detail.serviceCharge }}</dd>
            <dt class="col-4 text-end">操作员</dt>
            <dd class="col-8">{{ detail.operator }}</dd>
            <dt class="col-4 text-end">处理人</dt>
            <dd class="col-8">{{ detail.ticketer }}</dd>
            <dt class="col-4 text-end">新编码</dt>
            <dd class="col-8">{{ detail.newPnrNo }}</dd>
            <dt class="col-4 text-end">新票号</dt>
            <dd class="col-8">{{ detail.newTicketNo }}</dd>
            <dt class="col-4 text-end">状态</dt>
            <dd class="col-8">
              {{ getStatus(detail.status) }}
              <span class="small text-primary" v-if="detail.payStatus === 2"
                >已销</span
              >
            </dd>
            <!--  <dt class="col-4 text-end">提交时间</dt>
            <dd class="col-8">{{detail.createTime}}</dd>
            -->

            <dt class="col-4 text-end">国际?</dt>
            <dd class="col-8">
              <span class="text-danger" v-if="detail.intlTicket === 1"
                >国际</span
              >
              <span v-else>国内</span>
            </dd>
            <dt class="col-4 text-end">付款方式</dt>
            <dd class="col-8">{{ showPayType(detail.payType) }}</dd>
            <dt class="col-4 text-end">付款备注</dt>
            <dd class="col-8">{{ detail.payRemark }}</dd>
            <dt class="col-4 text-end">供应商</dt>
            <dd class="col-8">
              <template v-if="detail.supplier !== null">
                {{ detail.supplier.name }}
              </template>
            </dd>
            <dt class="col-4 text-end">支付方式</dt>
            <dd class="col-8">
              <template v-if="detail.paymentMethod !== null">
                {{ detail.paymentMethod.name }}
              </template>
            </dd>
            <dt class="col-4 text-end">修改时间</dt>
            <dd class="col-8">{{ detail.lastUpdate }}</dd>
          </dl>
          <div class="card-body" v-if="detail.status === 1">
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editPrice()"
            >
              修改价格
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editTicketSupplier()"
            >
              更改供应商
            </button>
            <button
              class="btn btn-info btn-sm ms-auto me-auto"
              @click.stop="editTicketPayment()"
            >
              更改支付方式
            </button>
          </div>
          <div class="card-body">
            <div
              class="d-flex flex-row justify-content-around"
              v-if="detail.status === 0"
            >
              <button
                class="btn btn-danger btn-sm me-auto"
                @click.stop="cancelChange(detail.id)"
              >
                取消
              </button>
              <button
                class="btn btn-sm btn-primary"
                @click.stop="processChange(detail.id)"
              >
                我来处理
              </button>
            </div>
            <div
              class="d-flex flex-row justify-content-around"
              v-else-if="detail.status === 1"
            >
              <button
                class="btn btn-danger btn-sm me-auto"
                @click.stop="cancelChange(detail.id)"
              >
                取消
              </button>
              <button
                class="btn btn-success btn-sm ms-auto me-auto"
                @click.stop="finishChangeOrder(detail.id)"
              >
                处理完毕
              </button>
            </div>
            <div
              class="d-flex flex-row justify-content-around"
              v-else-if="detail.status === 4"
            >
              <button
                class="btn btn-danger btn-sm ms-2"
                @click.stop="reopenChange(detail.id)"
                v-if="isAdmin"
              >
                重新打开
              </button>
            </div>

            <div
              class="d-flex flex-row justify-content-around"
              v-if="detail.status === 2"
            >
              <button
                class="btn btn-danger btn-sm ms-2"
                @click.stop="rollbackStatus()"
                v-if="isAdmin && detail.payStatus !== 2"
              >
                回滚
              </button>
              <button
                class="btn btn-warning ms-auto me-auto"
                @click.stop="changeTicket()"
              >
                改签
              </button>
              <button
                class="btn btn-danger ms-auto me-auto"
                @click.stop="refundTicket()"
                v-if="detail.newTicketNo.length === 14"
              >
                退票
              </button>
            </div>
          </div>
          <div class="card-body">
            备注: {{ detail.remark }}
            <template v-if="detail.status !== 2 && detail.status !== 4">
              <a
                href="javascript:void(0)"
                @click.stop="editRemark()"
                class="small float-end"
                title="修改备注"
                >修改</a
              >
            </template>
          </div>
          <div class="card-body">
            <button
              type="button"
              class="btn btn-info btn-sm float-end"
              @click.stop="searchHistories()"
            >
              查看操作记录
            </button>
          </div>
          <table class="table table-sm table-striped">
            <thead>
              <tr>
                <th>时间</th>
                <th>内容</th>
                <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="info in histories" :key="info.id">
                <td>{{ info.createTime }}</td>
                <td>{{ info.content }}</td>
                <td>{{ info.operator }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="tab-pane fade"
          id="smsDetailTab"
          role="tabpanel"
          aria-labelledby="sms-tab"
          v-if="detail !== null && detail.smsDetails.length > 0"
        >
          <sms-detail-list :dataList="detail.smsDetails"></sms-detail-list>
        </div>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-change-ticket-finished ref="modalFinishChange">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-change-ticket-finished>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
    <my-modal-price-update ref="updateChangeOrderPriceModal">
      <span slot="title">{{ modalTitle }}</span>
      <span slot="price1Title">{{ price1Title }}</span>
      <span slot="price2Title">{{ price2Title }}</span>
    </my-modal-price-update>
    <my-modal-change-ticket ref="changeTicketModal"></my-modal-change-ticket>
    <my-modal-refund-ticket ref="refundTicketModal"></my-modal-refund-ticket>
  </div>
</template>

<script>
import {
  processChangeOrder,
  finishChangeOrder,
  cancelChangeOrder,
  reopenChangeOrder,
} from "@/api/flight-change.js";
import {
  updateChangeOrderSupplier,
  updateChangeOrderPayment,
  updateChangeOrderRemark,
  updateChangeOrderPrice,
} from "@/api/flight-change.js";
import {
  searchChangeOrderDetail,
  searchChangeOrderHistory,
  showChangeOrderStatus,
  outputFlightChangeOrder2Bill,
} from "@/api/flight-change.js";
import { createChangeOrder } from "@/api/flight-change.js";
import { createRefundOrder } from "@/api/flight-refund.js";
import { showPayType } from "@/common/common.js";
import { showCustomerName } from "@/common/common.js";
import { rollbackChangeOrderStatus } from "@/api/admin.js";
import MyModalChangeTicketFinished from "@/components/modal/my-modal-change-ticket-finished.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalPriceUpdate from "@/components/modal/my-modal-price-update.vue";
import MyModalChangeTicket from "@/components/modal/my-modal-change-ticket.vue";
import MyModalRefundTicket from "@/components/modal/my-modal-refund-ticket.vue";
import SmsDetailList from "@/components/list/sms-detail-list_h5.vue";

export default {
  components: {
    MyModalChangeTicketFinished,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    MyModalPrompt,
    MyModalPriceUpdate,
    MyModalChangeTicket,
    MyModalRefundTicket,
    SmsDetailList,
  },
  data() {
    return {
      detail: null,
      id: 0,
      histories: [],

      modalTitle: "",
      modalNullable: true,
      price1Title: "",
      price2Title: "",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.id = this.$route.params.id;
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchChangeOrderDetail(this.id, (val) => {
        this.detail = val;
      });
    },
    searchHistories: function () {
      searchChangeOrderHistory(this.id, (v) => {
        this.histories = v;
      });
    },
    getStatus: function (val) {
      return showChangeOrderStatus(val);
    },
    processChange: function (id) {
      processChangeOrder(id, (v) => this.commonShowMessage(v));
    },
    cancelChange: function (id) {
      this.modalTitle = "确定取消改签单吗？";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          cancelChangeOrder(id, { remark: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    reopenChange: function (id) {
      this.modalTitle = "确定重开改签单吗？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          reopenChangeOrder(id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    finishChangeOrder: function (id) {
      this.$refs.modalFinishChange
        .modal()
        .then((info) => {
          finishChangeOrder(id, info, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    editTicketSupplier: function () {
      const promise = this.$refs.updateSupplierModal.modal(this.supplierId);
      promise
        .then((info) => {
          updateChangeOrderSupplier(
            this.id,
            { supplierId: info.supplierId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch(() => {});
    },
    editTicketPayment: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          updateChangeOrderPayment(
            this.id,
            { paymentMethodId: info.payMethodId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            return;
          }
          updateChangeOrderRemark(this.id, { remark: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editPrice: function () {
      this.modalTitle = "修改价格";
      this.price1Title = "航司改签费";
      this.price2Title = "我司服务费";
      this.$refs.updateChangeOrderPriceModal
        .modal(this.detail.airChangeCharge, this.detail.serviceCharge)
        .then((v) => this.doUpdatePrice(v))
        .catch(() => {});
    },
    doUpdatePrice: function (v) {
      const params = {
        airChangeCharge: v.price1,
        serviceCharge: v.price2,
      };

      updateChangeOrderPrice(this.id, params, (v) => this.commonShowMessage(v));
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    showPayType: function (val) {
      return showPayType(val);
    },
    changeTicket: function () {
      let changeTicketNo = this.detail.newTicketNo;
      if (changeTicketNo.length !== 14) {
        changeTicketNo = this.detail.balanceCode + "-" + this.detail.ticketNo;
      }

      //改签时，优先使用detrFlights
      let flights = this.detail.flights;
      if (this.detail.detrFlights.length > 0) {
        flights = this.detail.detrFlights;
      }

      const params = {
        ticketNo: changeTicketNo,
        changeCount: this.detail.changeCount + 1,
        psgName: this.detail.psgName,
        idNo: this.detail.idNo,
        orderId: this.detail.orderId,
        orderNo: this.detail.orderNo,
        parentChangeOrderNo: this.detail.changeOrderNo,
        intlTicket: this.detail.intlTicket,
        oldPnrNo: this.detail.newPnrNo,
        amount: 0,
        cost: 0,
        parvalue: this.detail.parvalue,
        tax: this.detail.tax,
        flights: flights,
      };
      this.$refs.changeTicketModal
        .modal(params)
        .then((v) => this.doCreateChangeOrder(v))
        .catch((ex) => {});
    },
    doCreateChangeOrder: function (info) {
      createChangeOrder(JSON.stringify(info), (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg, "danger");
        } else {
          this.showErrMsg("创建成功");
          this.$router.replace("/flt/change/order/" + jsonResult.returnCode);
        }
      });
    },
    refundTicket: function () {
      const amount = this.detail.parValue + this.detail.tax;
      const cost = amount;

      //退票时，优先使用detrFlights
      let flights = this.detail.flights;
      if (this.detail.detrFlights.length > 0) {
        flights = this.detail.detrFlights;
      }

      this.$refs.refundTicketModal
        .modal(
          this.detail.newTicketNo,
          this.detail.psgName,
          this.detail.idNo,
          0,
          this.detail.orderNo,
          flights,
          this.detail.intlTicket,
          amount,
          cost,
          this.detail.parValue,
          this.detail.tax
        )
        .then((info) => {
          this.doCreateRefundOrder(info);
        })
        .catch((ex) => {});
    },
    doCreateRefundOrder: function (info) {
      createRefundOrder(JSON.stringify(info), (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg, "danger");
        } else {
          // console.log(jsonResult)
          this.$router.push("/flt/refund/order/" + jsonResult.returnCode);
        }
      });
    },
    rollbackStatus: function () {
      this.modalTitle = "确定将订单状态回滚到上一个嘛？";

      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          rollbackChangeOrderStatus(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
  },
};
// 250
</script>